<template>
  <div>
    <!-- 页面头部（简化为小标题，贴近截图） -->
    <section class="bg-gray-900 py-6 md:py-8">
      <div class="container-custom">
        <div class="mb-2" data-sa data-sa-delay="0">
          <h1 class="text-base md:text-[1.1rem] font-bold text-white text-left">能做什么</h1>
        </div>

        <!-- 3x2 方块布局 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-6">
          <div
            v-for="(item, index) in items"
            :key="item.title + index"
            class="relative overflow-hidden shadow-md group"
            :class="item.accent ? 'bg-[#cd4132]/[0.904]' : 'bg-[rgba(61,66,76,0.804)]'"
            data-sa
            :data-sa-delay="index * 60"
          >
            <div class="relative flex flex-col items-center justify-center text-white aspect-square p-6 md:p-8">
              <div class="w-14 h-14 md:w-16 md:h-16 mb-4 md:mb-6 flex items-center justify-center">
                <svg viewBox="0 0 64 64" class="w-full h-full text-white">
                  <g fill="none" stroke="currentColor" stroke-width="2">
                    <path v-for="(d, i) in item.icon" :key="i" :d="d" stroke-linecap="round" stroke-linejoin="round" />
                  </g>
                </svg>
              </div>
              <div class="text-center">
                <div class="text-white font-semibold text-lg md:text-xl mb-1">{{ item.title }}</div>
                <div class="text-xs md:text-sm text-white/80 tracking-widest">{{ item.subtitle }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
useHead({
  title: '服务',
  meta: [
    { name: 'description', content: '乐在企业提供软件开发、技术咨询、系统集成、运维支持等全方位的数字化解决方案服务。' },
    { name: 'keywords', content: '企业服务,软件开发,技术咨询,系统集成,运维支持,数字化解决方案' }
  ]
})

const items = [
  {
    title: '广告设计',
    subtitle: 'ADVERTISEMENT',
    accent: false,
    icon: [
      'M10 20h44v24H10z',
      'M18 28h12',
      'M18 36h8'
    ]
  },
  {
    title: '宣传影片',
    subtitle: 'FILM',
    accent: true,
    icon: [
      'M22 32a10 10 0 1 0 20 0 10 10 0 1 0 -20 0z',
      'M42 24l10 6-10 6z'
    ]
  },
  {
    title: '商业拍摄',
    subtitle: 'PHOTOGRAPH',
    accent: false,
    icon: [
      'M14 26h36l-4 20H18z',
      'M22 24l4-6h12l4 6',
      'M32 36a8 8 0 1 0 0.001 0'
    ]
  },
  {
    title: '创新设计',
    subtitle: 'CREATIVE',
    accent: false,
    icon: [
      'M32 14a12 12 0 0 0-8 20c2 2 4 4 4 8h8c0-4 2-6 4-8a12 12 0 0 0-8-20z',
      'M26 46h12',
      'M28 50h8'
    ]
  },
  {
    title: '公关活动',
    subtitle: 'PR ACTIVITY',
    accent: false,
    icon: [
      'M24 42a8 8 0 1 0 16 0v-6H24z',
      'M32 20v10'
    ]
  },
  {
    title: '更多服务',
    subtitle: 'MORE SERVICE',
    accent: false,
    icon: [
      'M16 24h32v24H16z',
      'M24 32h16'
    ]
  }
]
</script>
